<template>
  <k-form-modal title="自定义服务费" v-bind="formModalState" width="340px" v-on="formModalEvent">
    <el-form-item label-width="0px" prop="self_service_ratio" class="m-mt-20">
      <el-input-number
        v-model="state.model.self_service_ratio"
        placeholder="请填写服务费"
        :controls="false"
        :max="100"
        :step="1"
        :precision="2"
        style="width: 260px; margin-right: 10px"
      />
      <span>%</span>
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useFormModal } from '@crud/index';
import { updateSelfRatio } from '@/api/crm-kgj/invest-claim';
defineOptions({
  name: 'InvoiceCenterEditRemarkModal'
});
const emits = defineEmits(['success']);
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    product_id: undefined,
    self_service_ratio: undefined
  },
  rules: {
    self_service_ratio: [{ required: true, message: '请填写备注内容' }]
  },
  onShow: (mode = 0, data: any) => {
    state.model = {
      product_id: data?.product_id,
      self_service_ratio: data?.self_service_ratio
    };
  },
  onSubmit: async (model: any, mode = 0) => {
    const { err } = await updateSelfRatio(model);
    if (err) return;
    ElMessage.success('修改成功');
    emits('success');
  }
});

defineExpose({
  show: methods.show
});
</script>
